<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="icons/iconfont.css"/>
		<style type="text/css">
			*{margin:0;padding:0;font-family: "微软雅黑";}
			ul,li{list-style: none;}
			html,body{height:100%;}
			body{background: #f3eff0;}
			#out{height:100%;display: -webkit-box;-webkit-box-orient: vertical;}
			header{position:relative;height:80px;line-height: 80px;background:#ab1b1a;color:#fff;text-align: center;}
			header h1{font-size: 36px;font-weight: normal;}
			header a{position: absolute;right:20px;top:15px;display: block;width:105px;height:50px;line-height: 50px;border-radius:12px;box-shadow: 0 0 10px #333;color:#fff;}
			header a .aa{font-size: 36px;}
			article{-webkit-box-flex: 1;overflow: hidden;}
			.imgList img{width:213px;height:300px;vertical-align: bottom;}
			.about{font-size: 28px;padding-left:25px;}
			.about span{display: block;line-height: 70px;}
			.about p{line-height: 60px;}
			.about p i{font-style: normal;margin-right:20px;color:#FF0E54;}
			.about p b{font-weight: normal;text-decoration: line-through;}
			.detail{padding-left:25px;padding-bottom:20px;font-size: 24px;}
			.detail p{line-height: 34px;}
			footer{height:80px;padding:5px 0;background: #a3a3a3;position:relative;}
			footer button{display:block;width:435px;height:80px;margin:0 auto;background: #ac1a1a;color:#fff;font-size: 26px;line-height: 80px;text-align: center;border-radius: 18px;border: 0;}
			.tips{position: absolute;bottom:100%;left:50%;display: none;width:150px;line-height:36px;text-align:center;background:#50B44D;color:#fff;border-radius: 15px;}
		</style>
	</head>
	<body>
		<section id="out">
			<header>
				<h1>商品资料</h1>
				<a href="shopcar.html"><i class="iconfont aa">&#xe61b;</i></a>
			</header>
			<article class="wrapper">				
					<section>
						<section class="imgList"></section>
						<section class="about"></section>
						<section class="detail"></section>
					</section>					
			</article>
			<footer>
				<button class="addCar">添加到购物车</button>
				<span class="tips">添加成功！</span>
			</footer>
		</section>
	</body>
	<script src="js/jquery183.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/json2.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/iscroll.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			bodyScale(640);
			var user=localStorage.getItem('user');
			var goodsID=localStorage.getItem('goodID');
			var num=0;
			setTimeout(function(){     //这里加个延迟，不然第一次无法滑动，需要等图片列表生成高度
				var myScroll=new IScroll('.wrapper',{
					    mouseWheel: true,
					    scrollbars: true
				});
			},400)			
			$.ajax({		//生成中间区域
				type:"get",
				url:"http://datainfo.duapp.com/shopdata/getGoods.php",
				async:true,
				dataType:'jsonp',
				data:{goodsID:goodsID},
				success:function(data){
					var arrImg=JSON.parse(data[0].imgsUrl);
					$.each(arrImg, function(i) {	//插入图片
						$('<img>').attr({src:arrImg[i]}).appendTo($('.imgList'));						
					});
					$('<span>').text(data[0].goodsName).appendTo($('.about'));	//插入商品名称等
					var iP=$('<p></p>').appendTo($('.about'));
					$('<i>').text("¥"+data[0].price).appendTo(iP);
					var iPrice=parseInt(data[0].price/data[0].discount*10);
					$('<b>').text(iPrice).appendTo(iP);
					$('<p>').text("购买人数："+data[0].buynumber).appendTo($('.about'));
					console.log(data[0].detail)
					var arrDet=data[0].detail.split("。");	//	插入商品详情
					$.each(arrDet, function(i,v) {
						$('<p>').text(v).appendTo($('.detail'))
					});
					
				}
			});
//			$('header a').on('click',function(){
//				console.log(1)
//				window.open('shopcar.html');
//			})
			$('.addCar').click(function(){		//点击添加购物车事件
				num++;
				$.ajax({
					type:"get",
					url:"http://datainfo.duapp.com/shopdata/updatecar.php",
					async:true,
					data:{
						userID:user,
						goodsID:goodsID,
						number:num
					},
					dataType:'json',
					success:function(data){
						console.log(data)
					}
				});
				$('.tips').stop(true,true).fadeIn().animate({display:'block'},800).fadeOut(800)
			})
			car();
			function car(){    //获取用户购物车信息
				$.ajax({		
					type:"get",
					url:"http://datainfo.duapp.com/shopdata/getCar.php",
					async:true,
					data:{userID:user},
					dataType:'jsonp',
					success:function(data){
						console.log(data)
						$.each(data, function(i,v) {
							if(data[i].goodsID==goodsID){
								num=data[i].number;
							}
						});
					}
				});
			}
			
			function bodyScale(n){	//屏幕宽度自适应
				var devicewidth=document.documentElement.clientWidth;
				var scale=devicewidth/n;
				document.body.style.zoom=scale;
			}
			window.onresize=function(){				
					bodyScale(640);
			}
		})
	</script>
</html>
